<!--  -->
<template>

  <div>
    <el-cascader   @change="changeHandle"  :props="props" placeholder="请选择楼栋" clearable v-model="buildingValue" :options="buildings" />
  </div>
 

</template>

<script lang='ts' setup>
import { getBuildingList } from '../../service/building/building'
import { withDefaults,ref,onMounted,defineEmits,defineProps} from 'vue'
 
 

const emit=defineEmits(["change"]);
 
interface PropsType{
  defaultValue?:number | null,
  label?:string, value?:string, checkStrictly?: boolean, multiple?:boolean,
}

const props= withDefaults(defineProps<PropsType>(),
{defaultValue:null, label: "name", value: "id",multiple:false, checkStrictly: true }
)

 
const buildingValue = defineModel();

// const buildingValue = ref<any>();

const buildings = ref([]);
const getBuildingData = async () => {

  const res: any = await getBuildingList(null);
  if (res.errCode === 10000) {
    buildings.value = res.data.list;
  }

}
onMounted(()=>{
    getBuildingData();
 
    if(props?.defaultValue){
      buildingValue.value=props.defaultValue;
      
    }
   
})

const changeHandle=(e:any)=>{
 
     let id=null;
    if(e){
       id=e[e.length-1];
    }
    emit("change",id);

}


</script>
<style scoped>
</style>